<template>
  <div align="center">
    <h2>门店信息列表</h2>
    门店名称
    <input type="text" v-model="state.name">
    门店联系方式
    <input type="text" v-model="state.phone">
    <input type="button" value="查询" @click="getList">
    <table border="1">
      <tr>
        <td>门店编号</td>
        <td>门店名称</td>
        <td>门店联系方式</td>
        <td>门店地址</td>
        <td>门店照片</td>
        <td>门店备注</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.sid}}</td>
        <td>{{item.sname}}</td>
        <td>{{item.sphone}}</td>
        <td>{{item.saddr}}</td>
        <td>{{item.sphoto}}</td>
        <td>{{item.sinfo}}</td>
        <td><input type="button" value="移除" @click="DeleteInfo(item.sid)">
        
        <input type="button" value="增加优惠券" @click="Discount"></td>
      </tr>
    </table>
    <table>
      共有<span>{{ counts }}</span>条数据，每页<span>{{ state.pageSize }}</span>条，当前第<span>{{ state.pageIndex }}</span>/<span>{{ indexs }}</span>页;
      <input type="button" value="首页" @click="goPage(1)">
      <input type="button" value="上一页" @click="goPage(state.pageIndex - 1)">
      <input type="button" value="下一页" @click="goPage(state.pageIndex + 1)">
      <input type="button" value="尾页" @click="goPage(indexs)">
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,toRefs } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
let router = useRouter()

let data :any= reactive({
  state:{
    name:'',
    phone:'',
    pageIndex:1,
    pageSize:2
  },
  list:[],
  counts:0,
  indexs:0,
})
let {state,list,counts,indexs} = toRefs(data)

onMounted(()=>{
  getList()
})

const goPage=(a:any)=>{
if(a >= 1 && a <= indexs.value){
  state.value.pageIndex = a;
  getList()
}
}

const getList=()=>{
  axios({
    url:'/api/Store/GetStoreList',
    method:'get',
    params:state.value
  })
  .then(res=>{
    console.log(res)
    list.value = res.data.data
    indexs.value = res.data.indexs
    counts.value= res.data.counts
  })
  .catch(err=>{
    console.log(err)
  })
}

const DeleteInfo=(id:any)=>{
  var f = confirm("确认删除吗?")
  if(f == true){
    axios({
      url:"/api/Store/GetDeleteInfo",
      method:'get',
      params:{
        id:id
      }
    })
    .then(res=>{
      console.log(res)
      if(res.data.data > 0){
        alert("删除成功");
        getList()
      }
      else{
        alert("删除失败");
        return;
      }
    })
    .catch(err=>{
      console.log(err)
    })
  }
}

const Discount=()=>{
  router.push('/discount')
}
</script>

<style scoped>
span{
  color:red;
}
</style>